<template>
  <div class="box">
    <el-tabs v-model="activeTabsValue" type="border-card" @tab-remove="removeTab">
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.id"
        :label="item.name"
        :name="item.id"
        :closable="!item.id.includes('home')"
      >
      <span slot="label">
        <i class="el-icon-full-screen" style="color:#303133" v-if="item.content.tabtype=='shell'"></i>
        <i class="el-icon-set-up" style="color:#1890ff" v-if="item.content.tabtype=='file'"></i>
        <i class="el-icon-data-line" style="color:#ffba00" v-if="item.content.tabtype=='overview'"></i>
        {{item.name}}</span>
        <div class="content" v-show="activeTabsValue === 'home'">
          <IndexShow ref="indexShow"></IndexShow>
          </div>
        <div class="content" v-show="activeTabsValue !== 'home'">
          <div class="terminal-box" v-if="item.content.tabtype=='shell'">
            <xterm-shell :socketURI="item.socketURI" :id="item.content.id" v-if="item.id && !item.id.includes('home')"></xterm-shell>
          </div>
          <overview-table v-if="item.content.tabtype=='overview'" :data="item"></overview-table>
          <upload-file ref="uploadFile" v-if="item.content.tabtype=='file'" :data="item"></upload-file>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import XtermShell from './components/XtermShell'
  import OverviewTable from './components/OverviewTable'
  import UploadFile from './components/UploadFile'
  import IndexShow from './components/IndexShow'
  import {uuid} from '@/utils/util.js'
  export default {
    components: {
      XtermShell,
      IndexShow,
      OverviewTable,
      UploadFile
    },
    data() {
      return {
        activeTabsValue: 'home',
        editableTabs: [{
          name: '首页',
          id: 'home',
          content: 'hello world,Tab 1 content22',
        }],
      }
    },
    mounted() {
    },
    watch: {
      activeTabsValue(newVal, oldVal) {
        if(newVal !== oldVal){
          this.$nextTick(() => {
            this.$refs.uploadFile && this.$refs.uploadFile.$refs && this.$refs.uploadFile.$refs.popoverProcess && this.$refs.uploadFile.$refs.popoverProcess.doClose
()
          });
        }
      },
    },
    methods: {
      addTab(data) {
        let newTabId = `${data.id}_${data.tabtype}`;
        if ((data.tabtype && !data.tabtype.includes('shell')) && this.editableTabs.some(v => v.id === newTabId)) {
          this.activeTabsValue = newTabId;
          return
        }
        const cId = uuid()
        const newId = data.tabtype && !data.tabtype.includes('shell') ? newTabId : `${newTabId}_${cId}`
        this.editableTabs.push({
          id: newId,
          name: data.name,
          socketURI: `ws://localhost:38888/ws?cId=${cId}`,
          content: data,
        });
        this.activeTabsValue = newId;
      },
      removeTab(id) {
        let tabs = this.editableTabs;
        let activeName = this.activeTabsValue;
        if (activeName === id) {
          tabs.forEach((tab, index) => {
            if (tab.id === id) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.id;
              }
            }
          });
        }

        this.activeTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.id !== id);
      }
    },
    destroyed() {},
  }
</script>

<style lang="scss" scoped>
.box{
  width:100%;
  height: 100%;
  /deep/.el-tabs{
    width: 100%;
    height: 100%;
    &__header{
      height: 45px;
      margin:0;
    }
    &__content{
      width: 100%;
      height: calc(100% - 45px);
      padding:0;
      .el-tab-pane{
        width:100%;
        height: 100%;
        .content{
          width:100%;
          height: 100%;
          .terminal-box{
            position: static!important;
            width:100%!important;
            height: 100%!important;
            border-radius: 0!important;
            padding:10px;
          }
        }
      }
    }
  }
}

.custom-content {
  list-style: none;
  margin: 0;
  padding: 0;
}

.custom-content li {
  float: left;
  display: flex;
  margin: 0 5px;
}

.t-dir {
  color: cornflowerblue;
}

.t-file {
  color: greenyellow;
}
</style>
